<template>
  <div>
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb> -->
    <MBX Biao="角色管理" Biao1="角色列表"></MBX>

    <!-- 卡片 -->
    <el-card class="mt">
      <el-button type="primary" @click="dialogFormVisible = true">添加角色</el-button>
      <!-- <el-table border class="mt15" :data="tableData">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div class="expand_box">
              <div v-if="scope.row.children.length > 0">
                <el-row
                  class="borderBtm_1px"
                  v-for="item1 in scope.row.children"
                  :key="item1.id"
                >
                  <el-col :span="6">
                    <el-tag
                       @close="delQx(scope.row, scope.row.id, item.id)"
                      closable
                      >{{ item1.authName }}</el-tag
                    >
                  </el-col>
                  <el-col :span="18">
                    <el-row
                      class="borderBtm_1px"
                      v-for="item2 in item1.children"
                      :key="item2.id"
                    >
                      <el-col :span="6">
                        <el-tag
                           @close="delQx(scope.row, scope.row.id, item.id)"
                          type="success"
                          closable
                          >{{ item2.authName }}</el-tag
                        >
                      </el-col>
                      <el-col :span="18">
                        <el-tag
                           @close="delQx(scope.row, scope.row.id, item.id)"
                          closable
                          type="warning"
                          v-for="item3 in item2.children"
                          :key="item3.id"
                        >
                          {{ item3.authName }}
                        </el-tag>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
              <div v-else>该角色暂无权限</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="bjJuese(scope.row)"
                >编辑</el-button
              >
              <el-button type="danger"
                icon="el-icon-star-off"
                size="mini"
                @click="delJuese(scope.row.id)"
                >删除</el-button
              >
              <el-button
                type="warning"
                icon="el-icon-delete"
                size="mini"
                @click="dpQx(scope.row)"
                >分配权限</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table> -->


      <el-table :data="tableData" class='mt' border stripe>
        <el-table-column type="expand">
          <template slot-scope="scope">
              <div v-if="scope.row.children.length > 0" class="scope_div">
                <el-row
                v-for="item in scope.row.children"
                class="borderBtm_1px"
                :key="item.id"
                id="col"
              >
                <el-col :span="6">
                  <el-tag
                    @close="delQx(scope.row, scope.row.id, item.id)"
                    
                    effect="dark"
                    closable
                    >{{ item.authName }}</el-tag
                  >
                </el-col>
                <el-col :span="18">
                  <el-row :gutter='24' class="borderBtm_1px" v-for="item1 in item.children" :key="item1.id" id="col">
                    <el-col :span="4">
                      <el-tag
                        @close="delQx(scope.row, scope.row.id, item1.id)"
                        
                        effect="dark"
                        type="success"
                        closable
                      >
                        {{ item1.authName }}
                      </el-tag>
                    </el-col>
                    <el-col :span="20">
                      <el-tag
                        @close="delQx(scope.row, scope.row.id, item2.id)"
                        
                        closable
                        type="warning"
                        effect="dark"
                        v-for="item2 in item1.children"
                        :key="item2.id"
                      >
                        {{ item2.authName }}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              </div>
              <div v-else>该角色暂无权限</div>
          </template>
        </el-table-column>

        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="bjJuese(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-star-off"
                size="mini"
                @click="delJuese(scope.row.id)"
                >删除</el-button
              >
              <el-button
                type="warning"
                icon="el-icon-delete"
                size="mini"
                @click="dpQx(scope.row)"
                >分配权限</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加弹框 -->

    <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules">
        <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
          <el-input v-model="form.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" :label-width="formLabelWidth">
          <el-input v-model="form.roleDesc" autocomplete="off" prop="roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addJuese">确 定</el-button>
      </div>
    </el-dialog>
    <!--  -->

    <!-- 编辑弹框 -->
    <el-dialog title="编辑角色" :visible.sync="dialogFormVisiblebj">
      <el-form :model="formbj" :rules="rulesbj" ref="formBj">
        <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
          <el-input v-model="formbj.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" :label-width="formLabelWidth">
          <el-input
            v-model="formbj.roleDesc"
            autocomplete="off"
            prop="roleDesc"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editJs">确 定</el-button>
      </div>
    </el-dialog>
    <!--  -->

    <!-- 分配权限弹框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-tree
        ref='treeRef'
        :data="treeList"
        show-checkbox
        node-key="id"
        :default-expanded-keys="checkArr"
        :default-checked-keys="checkArr"
        :props="defaultProps"
      >
      </el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addQx">确 定</el-button>
      </span>
    </el-dialog>
    <!--  -->
  </div>
</template>

<script>
import { zscJs, getDelqx, addJs, delJs, bjJe, getQx,gengXjs } from "@/http/api";
export default {
  data() {
    return {
      dangqianId:'',
      checkArr: [], //已选中id组成的数组
      treeList: [], //树形权限的数组
      tableData: [],
      dialogFormVisible: false,
      dialogFormVisiblebj: false,
      dialogVisible: false,
      form: {
        roleName: "",
        roleDesc: "",
      },
      formLabelWidth: "80px",
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" },
        ],
      },
      jsList: [],
      formbj: {
        //编辑的对象
        id: "",
        roleName: "",
        roleDesc: "",
      },
      rulesbj: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" },
        ],
      },
      defaultProps: {
        children: "children",
        label: "authName",
      },
    };
  },
  created() {
    this.getJuese();
  },
  methods: {
    //给分配权限的弹框按钮绑定点击事件，并确认提交
    async addQx(){
       //获取全选的id组成的数组
        const allcheckArr=this.$refs.treeRef.getCheckedKeys()
        console.log('全选id',allcheckArr);
       //获取半选id组成的数组
       const checkbanArr=this.$refs.treeRef.getHalfCheckedKeys()
       console.log('半选id的',checkbanArr);
       //合并全选id和半选id组成的数组
        const CheckArrid=[...allcheckArr,...checkbanArr]
       //将合并的数组转为字符串
        const AllCheckid=CheckArrid.join(',')
        console.log('全选和半选',AllCheckid);
      //调用更新权限接口
        const res=await gengXjs(this.dangqianId,AllCheckid)
        console.log('更新权限的结果',res);

        await this.getJuese();
    },
    //监听关闭分配权限的对话框
    handleClose() {
      console.log("监听关闭分配权限的对话框");
      this.checkArr = [];
      this.dialogVisible = false;
    },
    //打开分配权限的对话框
    async dpQx(row) {
      //清空上次选择结果
      this.checkArr = [];
      //获取当前id
      this.dangqianId=row.id
      this.dialogVisible = true;
      const res = await getQx("tree");
      console.log("树形的权限", res);
      this.treeList = res;

      this.qxCheckId(row, this.checkArr);
    },
    qxCheckId(row, checkArr) {
      console.log("1111", row);
      console.log("222", checkArr);
      //没有children就代表已经是最后一项，如果是最后一项则把它push给一个数组
      if (!row.children) {
        return checkArr.push(row.id);
      }

      row.children.forEach((item) => {
        this.qxCheckId(item, checkArr);
      });
    },
    //编辑角色弹出弹框
    bjJuese(row) {
      this.dialogFormVisiblebj = true;
      this.id = row.id;
      const { roleName, roleDesc } = row;
      this.formbj = { roleName, roleDesc };
      console.log("编辑角色", this.formbj);
    },
    //编辑角色并提交
    editJs() {
      this.$refs.formBj.validate(async (valid) => {
        if (!valid) return;
        const { roleName, roleDesc } = this.formbj;
        const res = await bjJe(this.id, { roleName, roleDesc });
        console.log("编辑用户提交啦", res);
        this.dialogFormVisiblebj = false;
        this.getJuese();
      });
    },
    //删除角色
    async delJuese(id) {
      const res = await this.$confirm("你敢删我, 嗯?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((error) => {
        this.$message({
          type: "error",
          message: "已取消删除",
        });
      });
      if (res === "confirm") {
        await delJs(id);
        console.log("删除角色", res);
        this.getJuese();
      }

      // const res=await delJs(id)
      // console.log('删除角色',res);
    },
    //添加角色
    async addJuese() {
      const res = await addJs(this.form);
      console.log("添加角色啦", res);
      this.jsList = res;
      this.dialogFormVisible = false;
      this.form.roleName = "";
      this.form.roleDesc = "";
      this.getJuese();
    },
    //删除角色指定权限
    async delQx(row, roleId, rightId) {
      const res = await getDelqx(roleId, rightId);
      console.log("删除指定角色权限", res);
      row.children = res;
      // this.getJuese()
    },
    //渲染
    async getJuese() {
      const res = await zscJs();
      console.log("角色列表", res);
      this.tableData = res;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-row{
  display: block;
  // text-align: left;
}
.el-tag {
  margin: 10px 20px;
}
.scope_div{
  // overflow: hidden;
  // margin: 0 10px;
  padding: 0 40px;
  // background-color: rgb(230, 0, 0);
}
// .el-col{
//   height: 60px;
//   line-height: 60px;
//   text-align: left;
  
// }
// .expand_box {
//   padding: 0 40px;
//   margin: 0 10px;
// }
.borderBtm_1px {
  border-bottom: 1px solid #eee;
 
}
</style>
